<template>
	<div>

		<div style="margin-top: -20px;margin-bottom: 5px;">
			<el-input v-model="TaskName" style="width: 150px;" placeholder="角色名称"></el-input>
			<el-button type="primary" style="margin-left: 5px;" @click="onSubmit()">查询</el-button>

			<el-button @click="ShowAdd">无用按钮</el-button>
		</div>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column type="selection" width="55" />
			<el-table-column fixed prop="Id" label="Id" width="50" />
			<el-table-column label="任务名称" prop="TaskName" width="150" />
			<el-table-column label="负责人" prop="UserName" width="120" />
			<el-table-column label="项目名称" prop="ProjectName" width="120" />
			<el-table-column label="开始时间" prop="BeginTime" width="180px" />
			<el-table-column label="结束时间" prop="EndTime" width="180px" />
			<el-table-column label="描述" prop="Precautions" width="180" />
			<ElTableColumn prop="IsAccept" label="是否接受"width="170px">
			    <template #default="scoped">
			        {{ IsAccept (scoped.row.IsAccept) }}
			    </template>
			</ElTableColumn>
			<el-table-column prop="Status" label="状态" width="90">
				<template #default="scoped">
					{{ IsStatus(scoped.row.Status) }}
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="ShowEdit(scope.row.Id)">编辑</el-button>
					<el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>
					<ElButton v-if="scope.row.IsAccept == 1" size="small" type="primary" @click="maok(scope.row)" link>
						接受</ElButton>
					<ElButton v-if="scope.row.IsAccept == 1" size="small" type="primary" @click="mone(scope.row)" link>
						拒绝</ElButton>
					<el-button v-if="scope.row.IsAccept == 2&&scope.row.Status == 1" size="small" type="primary"
						@click="submittask(scope.row.Id)" link>提交任务</el-button>
					<el-button v-if="scope.row.IsAccept == 2&& scope.row.Status == 1" size="small" type="primary"
						@click="postpone(scope.row.Id)" link>申请延期</el-button>
					<el-button v-if=" scope.row.IsAccept == 2&&scope.row.Status == 1" size="small" type="primary"
						@click="transfer(scope.row.Id)" link>申请转移</el-button>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[5,10, 20, 30, 40]"
			:size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />


		<el-dialog v-model="dialogAddVisible" title="添加任务" width="800px" draggable>
			<TaskAdd @Close="Close" v-if="dialogAddVisible"></TaskAdd>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="600" draggable>
			<TaskUpdate :Id="Id" @onSave="closeUpdate" v-if="dialogUpdateVisible"></TaskUpdate>
		</el-dialog>

		<ElDialog draggable v-model="submittaskvislbe" title="提交任务" width="600px">
			<Submittask v-if="submittaskvislbe" :Id="Id" @CloesDialog="CloesDialog"></Submittask>
		</ElDialog>

		<ElDialog draggable v-model="postponeVisble" title="延期" width="600px">
			<Taskpostpone v-if="postponeVisble" :Id="Id" @CloesDialog="CloesDialog"></Taskpostpone>
		</ElDialog>

		<ElDialog draggable v-model="transferVisble" title="转移" width="600px">
			<Tasktransfer v-if="transferVisble" :Id="Id" @CloesDialog="CloesDialog"></Tasktransfer>
		</ElDialog>
	</div>
</template>

<script lang="ts" setup>
	import type { ElTable } from 'element-plus'
	import taskapi from '@/api/taskapi';
	import { ref, onMounted } from "vue"
	import TaskAdd from "./TaskAdd.vue"
	import TaskUpdate from "./TaskUpdate.vue"
	import Tasktransfer from "./Tasktransfer.vue"
	import Taskpostpone from "./Taskpostpone.vue"
	import Submittask from "./Submittask.vue"
	import { ElMessageBox, ElNotification } from 'element-plus'

	const Id = ref(0);

	const TaskName = ref("")
	const tableData = ref([])
	const total = ref(0);
	const pageSize = ref(5);
	const pageIndex = ref(1);

	const size = ref<ElTable>('default')
	const background = ref(false)
	const disabled = ref(false)

	const dialogAddVisible = ref(false);
	const dialogUpdateVisible = ref(false);
	const dialogDetailVisible = ref(false);
	const submittaskvislbe = ref(false);
	const postponeVisble = ref(false);
	const transferVisble = ref(false);


	const getdata = (TaskName : string = "", PageSize : number = 5, PageIndex : number = 1) => {
		var query = {
			TaskName: TaskName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		taskapi.query(query).then(res => {
			console.log("roledata=", res);
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}

	onMounted(() => {
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	})

	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	}

	const onSubmit = () => {
		getdata(TaskName.value)
	}

	//显示添加
	const ShowAdd = () => {
		dialogAddVisible.value = !dialogAddVisible.value
	}

	const closeAdd = (flag : boolean) => {
		//关闭弹窗
		dialogAddVisible.value = !dialogAddVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	}
	const ShowDetail = (Id : number) => {
		console.log("Id=", Id);
	}
	const ShowEdit = (id : number) => {
		console.log("Id=", id);
		Id.value = id;
		dialogUpdateVisible.value = !dialogUpdateVisible.value
	}

	const closeUpdate = (flag : boolean) => {
		//关闭弹窗
		dialogUpdateVisible.value = !dialogUpdateVisible.value
		//刷新数据
		pageIndex.value = 1;
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	}

	const submittask = (id : any) => {
		Id.value = id
		submittaskvislbe.value = true
	}
	const postpone = (id : number) => {
		Id.value = id
		postponeVisble.value = true

	}
	const transfer = (id : number) => {
		Id.value = id
		transferVisble.value = true
	}
	const CloesDialog = (val : any) => {
		switch (val) {
			case "submit":
				submittaskvislbe.value = false;
				break;
			case "postpone":
				postponeVisble.value = false;
				break;
			case "transfer":
				transferVisble.value = false;
				break;
		}
		getdata(TaskName.value, pageSize.value, pageIndex.value);
	}
	
const IsAccept = ((status: any) => {
    let statustext = "待接受"
    switch (status) {
        case 2:
            statustext = "已接受"
            break;
       
    }
    return statustext
})
//接受
const maok =(row:any)=>{
    
    ElMessageBox.confirm("请问确定接受该任务吗?",{
        confirmButtonText:"确定",
        cancelButtonText:"取消"
    }).then(()=>{
        row.IsAccept = 2;
		
        taskapi.isok(row).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
    }).catch(err=>{
        console.log(err)
    })
    
}
//拒绝
const mone = (row:any)=>{
    ElMessageBox.confirm("请问确定拒绝该任务吗?",{
        confirmButtonText:"确定",
        cancelButtonText:"取消"
    }).then(()=>{
        row.IsAccept = 0;
        taskapi.isok(row).then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
    }).catch(err=>{
        console.log(err)
    })
}
	/**
	 * 判断状态
	 * @param status 
	 */
	const IsStatus = ((status : any) => {
		let statustext = "正常"
		switch (status) {
			case 0:
				statustext = "删除"
				break;
			case -1:
				statustext = "禁用"
				break;
		}
		return statustext
	})

	const Delete = (Id : number) => {
		console.log("Id=", Id);
		ElMessageBox.confirm("确认删除吗？").then(() => {
			//
			taskapi.del({ id: Id }).then(res => {
				console.log("res=>", res)
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '删除成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							//emit("onSave", true)
							getdata(TaskName.value, pageSize.value, pageIndex.value);
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				}
			}).catch(err => {

			})
		}).catch(() => {

		})
	}
</script>

<style>
</style>